<template>
	<view class="recommend-item-box">
		<view class="img-box" v-if="activity.cover" @click="jumpToDetail()">
			<image class="item-img" :src="errorImg ? errorImg : activity.cover" mode="widthFix" @load="considerPush"
				@error="imgLoadError"></image>
			<view class="label-box" v-if="activity.labels">
				<view class="label-item" v-for="label of activity.labels.split(',')">{{ label }}</view>
			</view>
		</view>
		<view class="activity-title" @click="jumpToDetail()">{{ activity.name ? activity.name : '' }}</view>
		<view class="price-box" @click="jumpToDetail()">
			<view class="price-text" v-if="activity.cost">¥{{ activity.cost }}<text class="price-unit">/人</text></view>
			<view class="free" v-if="!activity.cost">免费</view>
			<view class="user-box" v-if="activity.activityUserList">
				<view class="activity-avatar-box" v-for="(user, index) of activity.activityUserList" v-if="index < 3"
					:style="{'left': `-${(index + 1) * 26}rpx`, 'z-index': 100 - index}">
					<image class="avatar-img" :src="user.avatar"></image>
				</view>
				<view class="user-num" v-if="activity.maxPerson">
					{{ activity.activityUserList.length }}/{{ activity.maxPerson }}
				</view>
			</view>
		</view>
		<view class="distance-row">
			<view class="distance-box">
				<image class="distance-img" src="/static/listLocation.png"></image>
				<text class="distance-text">距你{{ getDistance({latitude: myLocation.latitude, longitude: myLocation.longitude}, {latitude: activity.lat, longitude: activity.lon}) }}</text>
			</view>
			<view class="like-box" @click="likeActivity()">
				<image class="like-img" :src="activity.isLike ? '/static/listLiked.png' : '/static/listLike.png'">
				</image>
				<text class="like-text">{{ activity.likeNum ? activity.likeNum : 0 }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "recommendItem",
		data() {
			return {
				labels: [],
				errorImg: '',
				myLocation: {}
			};
		},
		props: {
			activity: {
				type: Object
			},
			pushData: {
				type: Function
			}
		},
		mounted() {
			this.myLocation = this.$myLocation;
		},
		methods: {
			considerPush() {
				this.pushData();
			},
			imgLoadError() {
				this.errorImg = '/static/logo.png';
			},
			jumpToDetail() {
				uni.navigateTo({
					url: `/pages/activityDetail?id=${this.activity.id}`
				})
			},
			likeActivity() {
				if (!this.activity.isLike) {
					const params = {
						activityId: this.activity.id,
						isLike: 1
					}
					this.$apis.likeOrJoinActivity(params).then(res => {
						if (res.code === 0) {
							uni.$emit('listLikeActivity', this.activity);
							uni.showToast({
								title: '成功!',
								icon: 'success'
							})
						}
					})
				}
			},
			getDistance(p1, p2) {
				var radLat1 = p1.latitude * Math.PI / 180.0;
				var radLat2 = p2.latitude * Math.PI / 180.0;
				var a = radLat1 - radLat2;
				var b = p1.longitude * Math.PI / 180.0 - p2.longitude * Math.PI / 180.0;
				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math
					.pow(Math.sin(b / 2), 2)));
				s = s * 6378.137;
				s = Math.round(s * 10000) / 10;
				let res = '';
				if (s > 1000) {
					res = (s / 1000).toFixed(1) + '公里';
				} else {
					res = s + '米';
				}
				return res;
			}
		}
	}
</script>

<style lang="scss">
	.recommend-item-box {
		width: 328rpx;
		margin-bottom: 32rpx;

		.img-box {
			width: 328rpx;
			position: relative;

			.item-img {
				width: 328rpx;
				border-radius: 28rpx;
			}

			.label-box {
				width: 296rpx;
				position: absolute;
				bottom: 16rpx;
				left: 16rpx;
				display: flex;
				flex-wrap: wrap;

				.label-item {
					font-size: 20rpx;
					font-weight: bold;
					color: #FFFFFF;
					line-height: 20rpx;
					padding: 2rpx 8rpx;
					margin-left: 8rpx;
					margin-bottom: 8rpx;
					background: rgba(0, 0, 0, 0.5);
					border-radius: 16rpx;
				}
			}
		}

		.activity-title {
			width: 328rpx;
			margin-top: 8rpx;
			max-lines: 2;
			font-size: 28rpx;
			font-weight: bold;
			color: #222222;
		}

		.price-box {
			width: 100%;
			margin-top: 8rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.price-text {
				font-size: 32rpx;
				font-weight: bold;
				color: #FF5E2E;

				.price-unit {
					font-size: 20rpx;
				}
			}

			.free {
				font-size: 32rpx;
				font-weight: bold;
				color: #31B57E;
			}

			.user-box {
				position: relative;

				.user-num {
					height: 32rpx;
					padding: 0 12rpx 0 12rpx;
					background: #F6F7F9;
					border-radius: 24px;
					border: 2rpx solid #FFFFFF;
					font-size: 20rpx;
					font-weight: bold;
					color: #999999;
					line-height: 32rpx;
					z-index: 999;
					position: sticky;
				}

				.activity-avatar-box {
					width: 28rpx;
					height: 28rpx;
					border-radius: 16rpx;
					border: 2rpx solid #FFFFFF;
					position: absolute;
					top: -8rpx;

					.avatar-img {
						width: 28rpx;
						height: 28rpx;
						border-radius: 16rpx;
					}
				}
			}
		}

		.distance-row {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.distance-box {
				display: flex;
				align-items: center;

				.distance-img {
					width: 20rpx;
					height: 24rpx;
				}

				.distance-text {
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
					margin-left: 10rpx;
				}
			}

			.like-box {
				display: flex;
				align-items: center;
				margin-top: 10rpx;

				.like-img {
					width: 27rpx;
					height: 24rpx;
				}

				.like-text {
					width: 40rpx;
					text-align: end;
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
				}
			}
		}
	}
</style>
